Multimedia
Home

Multimedia

Afbeelding blauwe tegels
CSS
navigatie met tegels

Multimedia

CSS - navigatie met tegels

Doelstelling

  1. We hebben al gezien hoe je menu's en submenu's maakt in Multimedia - Navigatie.
  2. In deze les leren we
    1. de html om tegels te maken;
    2. en hoe je de tegels opmaakt in CSS;

Leerpad

  1. Leren werken met Flexbox
  2. Als voorbeeld nemen we een webpagina waarop we de bezienswaardigheden van een excursie oplijsten. Als voorbeeld neem ik de dolmens en de menhirs die je de Sarthe in Frankrijk kan bezoeken. De gegevens hebben we gevonden op Sites mégalithiques de la Sarthe.
  3. We vertrekken van een wireframe om een idee te hebben van hoe de tegelpagina er moet zien. Je vindt de wireframe op mmt - website wireframes.
  4. We maken een map met de naam flexbox. In die map maken we een submap met de naam css en een submap met de naam image. In de image map hebben we 2 submappen. Een met de naam small waarin de afbeeldingen van de menhirs en dolmens in klein formaat staan en 1 met de naam big voor de afbeeldingen in groter formaat. In de css map maken we een flex.css bestand. 
    |-multimedia
   |-basiselementen
   |-css-leren
   |-flexbox
      |-css
         |-css
           |-app.css
           |-flex.css
      |-image
          |-small
            |-Allee couverte du Colombier.jpg
            |-...
          |-big           
            |-Allee couverte du Colombier.jpg
            |-...
    |-marsman.html
    |-neolithicum.html
  5. HTML
    1. Algemene structuur 
      <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="application-name" content="moe maar tevreden" />
    <meta name="description" content="Webapp om uitstappen te organiseren" />
    <meta name="keywords" content="trip, uitstap, beheer, schooluitstap, bezienswaardigheid" />
    <meta name="author" content="Jef Inghelbrecht" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/flex.css">
    <title>Neolithicum Sarthe</title>
</head>
<body>
    <header>
        <nav>
            <a href="../index.html">Index</a><a href="eigen.html">Eigen pagina</a>
        </nav>
        <h1>Le Sarthe</h1>
    </header>
    <article>
        <section id="section1">
        </section>
        ...
        <section id="section42">
        </section>
        <footer>
            <address>
                Samengesteld door Jef Inghelbrecht
            </address>
        </footer>
    </article>
    <footer>
        &copy; Moe maar tevreden 2019
    </footer>
</html>
</body>
    2. Detail structuur van 1 tegel (1 section): 
      <section id="section8">
    <h1>Menhir de Gobianne</h1>
    <figure>
        <img src="image/small/Menhir de Gobianne.jpg" />
        <figcaption><a href="#section8">Menhir de Gobianne</a>
            <figcaption>
    </figure>
    <ul>
        <li>Type: menhir</li>
        <li>Periode: Neolithicum</li>
        <li>Coördinaten:47° 44′ 34″ N, 0° 29′ 23″ E</li>
        <li>Lengtegraad: 0.4897222222222222</li>
        <li>Breedtegraad: 47.7427778</li>
        <li>Land: Frankrijk</li>
        <li>Regio: Pays de la Loire</li>
        <li>Departement: Sarthe</li>
        <li>Stad: Chahaignes</li>
    </ul>
</section>
  6. Opmaak met CSS
    1. De tegels staan in een section element die op hun beurt in een article element staan. Het is dus het article element dat we als een flexbox gaan gebruiken: 
      article {
   display: flex;
}
    2. We willen dat de tegels de ene na de andere op de horizontale as geplaatst worden. We geven dus aan dat flexbox ze als een rij moet weergeven:
    3. Als een rij gevuld is tot aan de rechterkant van het browservenster moet de eerstvolgende tegel op een volgende rij geplaatst worden: 
      article {
   display: flex;
   flex-direction: row;
}
    4. Als een rij gevuld is met de volgende tegel op de volgende lijn: 
      article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 }
    5. Links en rechts van en tussen de tegels moet de overblijvende witruimte gelijkmatig verdeeld worden: 
      article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
 }
    6. Boven, onder en tussen de tegels moet de overblijvende witruimte gelijkmatig verdeeld worden: 
      article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
 }
    7. Bij het openen van de bezienswaardigheidpagina tonen we alleen de figure, namelijk de afbeelding en het bijschrijft. Het bijschrift is een link waarmee de overige informatie in de tegel zichtbaar gemaakt kan worden. Om alleen de figure te tonen volstaat het de andere elementen in de tegel te verbergen: 
      section h1, section ul, section p {
    display: none;
}
    8. lleen als er op een link geklikt wordt en als dus een tegel target van een actieve link wordt moeten die elementen getoond worden: 
      section:target + section h1, section:target + section ul, section:target + section p {
    display: block;
}
    9. Alle info in de tegel wordt getoond als de tegel target wordt en de tegel moet ook verbreed worden zodat de hele rij door de tegel wordt ingenomen. We gebruiken daarom percenten: 
      section:target {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
    10. We maken de breedte van elke afbeelding gelijk: 
      section figure img {
    width: 10em;
}
    11. En we centreren het bijschrift van de figuur: 
      section figure figcaption {
    text-align: center;
}
    12. Als we nu op een link klikken wordt de tegel verbreed. Maar de tegel springt naar de bovenkant van het browservenster. We willen dat de verbreedde tegel in het midden van het scherm komt te staan. Daarvoor gaan we springen naar de tegel die er net voor staat en de daarop volgende tegel vergroten. We doen daarom twee dingen:
      1. In de link veranderen we de bladwijzer naar de id van de tegel die net voor de tegel staat waarnaar we willen springen. In de tegel met id="section36" bijvoorbeeld staat in de link href="#section35": 
        <section id="section36">
    <h1>Menhir du Loup Pendu</h1>
    <figure>
        <img src="image/small/Menhir du Loup pendu.jpg" />
        <figcaption><a href="#section35">Menhir du Loup Pendu</a>
            <figcaption>
    </figure>
      2. Voor de tegel met id="section1" moet href="#section0" in de link staan. Dus voegen we de volgende sectie bovenaan in het article element toe: 
        <section id="section0">
</section>
      3. In de css voegen we een stijlregel toe die dit dummy-element moet verbergen: 
        #section0 {
    display: none;
}
      4. De target is niet meer het element waarnaar gesprongen wordt, maar het eerst daaropvolgende element. Dat geven we aan met het + (plus) teken: 
        section:target + section {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

section:target + section h1,
section:target + section ul,
section:target + section p {
    display: block;
}

Opdracht

  1. Maak een webpagina voor een uitstap naar keuze met minstens 6 bezienswaardigheden.
  2. Werk in de submap met de naam flexbox.
  3. Maak een nieuw css bestand voor je eigen webpagina en geef het de naam flexstyle.css. Plaats dit bestand in de submap met de naam css.
  4. Voeg navigatieopmaak voor tegels toe aan je eigen webpagina en plaats de css in je eigen flexstyle.css. Voeg zowel de horizontale navigatieopmaak (voor het menu bovenaan) als de tegelnavigatie toe in je webpagina. Plaats de CSS in flexstyle.css.
  5. Dat is het resultaat:
    neolithicum-navigatie-met-tegels
    neolithicum-navigatie-met-tegels
  6. Deze opdracht is een onderdeel van het examen!

De volledige code

  1. HTML 
    <!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">
    <meta name="application-name" content="moe maar tevreden" />
    <meta name="description" content="Webapp om uitstappen te organiseren" />
    <meta name="keywords" content="trip, uitstap, beheer, schooluitstap, bezienswaardigheid" />
    <meta name="author" content="Jef Inghelbrecht" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/flex.css">
    <title>Neolithicum Sarthe</title>
</head>

<body>
    <header>
        <nav>
            <a href="../index.html">Index</a><a href="eigen.html">Eigen pagina</a>
        </nav>
        <h1>Le Sarthe</h1>
    </header>
    <article>
        <section id="section0">
        </section>
        <section id="section1">
            <h1>Allée couverte du Colombier</h1>
            <figure>
                <img src="image/small/Allee couverte du Colombier.jpg" />
                <figcaption><a href="#section0">Allée couverte du Colombier</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: allée couverte</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten DMS: 47° 42′ 25″ nord, 0° 14′ 49″ est</li>
                <li>Lengtegraad: 0.24694444444444444</li>
                <li>Breedtegraad: 47.7069444</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Aubigné-Racan</li>
            </ul>
        </section>
        <section id="section2">
            <h1>Dolmen de la Pierre</h1>
            <figure>
                <img src="image/small/Dolmen de la Pierre.jpg" />
                <figcaption><a href="#section1">Dolmen de la Pierre</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 42′ 40″ nord, 0° 14′ 57″ est</li>
                <li>Lengtegraad: 0.24916666666666668</li>
                <li>Breedtegraad: 47.7111111</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Aubigné-Racan</li>
            </ul>
        </section>
        <section id="section3">
            <h1>Menhir du château de Bossé</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section2">Menhir du château de Bossé</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Aubigné-Racan</li>
            </ul>
        </section>
        <section id="section4">
            <h1>Nécropole néolithique du théâtre antique de Cherré</h1>
            <figure>
                <img src="image/small/Necropole neolithique du theatre antique de Cherre.png" />
                <figcaption><a href="#section3">Nécropole néolithique du théâtre antique de Cherré</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 39′ 48″ nord, 0° 14′ 09″ est</li>
                <li>Lengtegraad: 0.23583333333333334</li>
                <li>Breedtegraad: 47.6633333</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Aubigné-Racan</li>
            </ul>
        </section>
        <section id="section5">
            <h1>Menhir du Perray</h1>
            <figure>
                <img src="image/small/Menhir du Perray.png" />
                <figcaption><a href="#section4">Menhir du Perray</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 46′ 11″ N, 0° 23′ 12″ E</li>
                <li>Lengtegraad: 0.3866666666666667</li>
                <li>Breedtegraad: 47.7530556</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Beaumont-Pied-de-Bœuf</li>
            </ul>
        </section>
        <section id="section6">
            <h1>Menhir de Clossay</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section5">Menhir de Clossay</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Bonnétable</li>
            </ul>
        </section>

        <section id="section7">
            <h1>Menhir du Caillou</h1>
            <figure>
                <img src="image/small/Menhir du Caillou.jpg" />
                <figcaption><a href="#section6">Menhir du Caillou</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 44′ 39″ nord, 0° 29′ 09″ est</li>
                <li>Lengtegraad: 0.48583333333333334</li>
                <li>Breedtegraad: 47.7441667</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Chahaignes</li>
            </ul>
        </section>
        <section id="section8">
            <h1>Menhir de Gobianne</h1>
            <figure>
                <img src="image/small/Menhir de Gobianne.jpg" />
                <figcaption><a href="#section7">Menhir de Gobianne</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:47° 44′ 34″ N, 0° 29′ 23″ E</li>
                <li>Lengtegraad: 0.4897222222222222</li>
                <li>Breedtegraad: 47.7427778</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Chahaignes</li>
            </ul>
        </section>
        <section id="section9">
            <h1>Menhir de Haute-Crane</h1>
            <figure>
                <img src="image/small/Menhir de Haute Crane.jpg" />
                <figcaption><a href="#section8">Menhir de Haute-Crane</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 39′ 33″ nord, 0° 31′ 21″ est</li>
                <li>Lengtegraad: 0.5225000000000001</li>
                <li>Breedtegraad: 47.6591667</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Dissay-sous-Courcillon</li>
            </ul>
        </section>
        <section id="section10">
            <h1>Menhir de la Pierre Levée</h1>
            <figure>
                <img src="image/small/Menhir de la Pierre levee.jpg" />
                <figcaption><a href="#section9">Menhir de la Pierre Levée</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 40′ 30″ nord, 0° 29′ 04″ est</li>
                <li>Lengtegraad: 0.48444444444444446</li>
                <li>Breedtegraad: 47.675</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Dissay-sous-Courcillon</li>
            </ul>
        </section>
        <section id="section11">
            <h1>Menhir de La Serpinerie</h1>
            <figure>
                <img src="image/small/Menhir de la Serpinerie.jpg" />
                <figcaption><a href="#section10">Menhir de La Serpinerie</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 41′ 06″ nord, 0° 29′ 22″ est</li>
                <li>Lengtegraad: 0.48944444444444446</li>
                <li>Breedtegraad: 47.685</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Dissay-sous-Courcillon</li>
            </ul>
        </section>
        <section id="section12">
            <h1>Menhir de Lorrière</h1>
            <figure>
                <img src="image/small/Menhir de Lorriere.jpg" />
                <figcaption><a href="#section11">Menhir de Lorrière</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 35′ 11″ nord, 0° 08′ 24″ est</li>
                <li>Lengtegraad: 0.13999999999999999</li>
                <li>Breedtegraad: 47.5863889</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Dissé-sous-le-Lude</li>
            </ul>
        </section>
        <section id="section13">
            <h1>Pierre couverte</h1>
            <figure>
                <img src="image/small/Menhir du Caillou.jpg" />
                <figcaption><a href="#section12">Menhir du Caillou</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 03′ 14″ nord, 0° 31′ 14″ est</li>
                <li>Lengtegraad: 0.5205555555555557</li>
                <li>Breedtegraad: 48.0538889</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Duneau</li>
            </ul>
        </section>
        <section id="section14">
            <h1>Pierre Fiche</h1>
            <figure>
                <img src="image/small/Pierre Fiche.jpg" />
                <figcaption><a href="#section13">Pierre Fiche</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: Mégalithe</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 03′ 36″ N, 0° 31′ 25″ E</li>
                <li>Lengtegraad: 0.5236111111111111</li>
                <li>Breedtegraad: 48.06</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Duneau</li>
            </ul>
        </section>
        <section id="section15">
            <h1>Les pierres tournantes</h1>
            <figure>
                <img src="image/small/Les pierres tournantes.jpg" />
                <figcaption><a href="#section14">Les pierres tournantes</a>
                    <figcaption>
            </figure>
            <p>Opstelling van de verplaatste menhirs voor de bouw van een autostrade.</p>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 50′ 34″ nord, 0° 18′ 30″ est</li>
                <li>Lengtegraad: 0.30833333333333335</li>
                <li>Breedtegraad: 47.8427778</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Écommoy</li>
            </ul>
        </section>
        <section id="section16">
            <h1>Dolmen de Cuissé</h1>
            <figure>
                <img src="image/small/dolmen-abstract.png" />
                <figcaption><a href="#section15">Dolmen de Cuissé</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad: 0.24916666666666668</li>
                <li>Breedtegraad: 47.7111111</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Le Lude</li>
            </ul>
        </section>
        <section id="section17">
            <h1>Menhir (ancien dolmen) de la Pierre</h1>
            <figure>
                <img src="image/small/Menhir -ancien dolmen- de la Pierre.jpg" />
                <figcaption><a href="#section16">Menhir (ancien dolmen) de la Pierre</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 48′ 24″ nord, 0° 02′ 18″ est</li>
                <li>Lengtegraad: 0.03833333333333333</li>
                <li>Breedtegraad: 47.8066667</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: La Fontaine-Saint-Martin</li>
            </ul>
        </section>
        <section id="section18">
            <h1>Pierre Saint-Julien</h1>
            <figure>
                <img src="image/small/Pierre Saint-Julien.jpg" />
                <figcaption><a href="#section17">Pierre Saint-Julien</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 00′ 35″ N, 0° 11′ 53″ E</li>
                <li>Lengtegraad: 0.19805555555555554</li>
                <li>Breedtegraad: 48.0097222</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Le Mans<br>Place Saint-Michel</li>
            </ul>
        </section>
        <section id="section19">
            <h1>Dolmen de Lhomme</h1>
            <figure>
                <img src="image/small/Dolmen de Lhomme.jpg" />
                <figcaption><a href="#section18">Dolmen de Lhomme</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 46′ 07″ N, 0° 35′ 11″ E</li>
                <li>Lengtegraad: 0.586388888888889</li>
                <li>Breedtegraad: 47.7686111</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Lhomme<br>Maupertuis</li>
            </ul>
        </section>
        <section id="section20">
            <h1>Menhir de la Brunerie</h1>
            <figure>
                <img src="image/small/Menhir de la Brunerie.jpg" />
                <figcaption><a href="#section19">Menhir de la Brunerie</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 46′ 24″ nord, 0° 07′ 37″ est</li>
                <li>Lengtegraad: 0.12694444444444444</li>
                <li>Breedtegraad: 47.7733333</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Mansigné</li>
            </ul>
        </section>
        <section id="section21">
            <h1>Menhir de Courtevrais</h1>
            <figure>
                <img src="image/small/Menhir de Courtevrais.jpg" />
                <figcaption><a href="#section20">Menhir de Courtevrais</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 13′ 16″ nord, 0° 28′ 52″ est</li>
                <li>Lengtegraad: 0.4811111111111111</li>
                <li>Breedtegraad: 48.2211111</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Nogent-le-Bernard</li>
            </ul>
        </section>
        <section id="section22">
            <h1>Menhir non levé</h1>
            <figure>
                <img src="image/small/Menhir non leve.jpg" />
                <figcaption><a href="#section21">Menhir non levé</a>
                    <figcaption>
            </figure>
            <p>Menhir non levé, ou tombé, à 50 mètres au nord-est des menhirs de la Mère et de la Fille.</p>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 47′ 01″ nord, 0° 05′ 27″ est</li>
                <li>Lengtegraad: 0.24916666666666668</li>
                <li>Breedtegraad: 47.7111111</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Oizé</li>
            </ul>
        </section>
        <section id="section23">
            <h1>La Pierre Bergère</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section22">La Pierre Bergère</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Parigné-l'Évêque</li>
            </ul>
        </section>
        <section id="section24">
            <h1>Pierre couverte</h1>
            <figure>
                <img src="image/small/Pierre couverte.jpg" />
                <figcaption><a href="#section23">Pierre couverte</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 51′ 30″ N, 0° 05′ 33″ E</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Parigné-le-Pôlin</li>
            </ul>
        </section>
        <section id="section25">
            <h1>Dolmen d'Amenon</h1>
            <figure>
                <img src="image/small/Dolmen d-Amenon.jpg" />
                <figcaption><a href="#section24">Dolmen d'Amenon</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 38′ 12″ N, 0° 15′ 12″ E</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Germain-d'Arcé<br>La Pièce de la Ronce</li>
            </ul>
        </section>
        <section id="section26">
            <h1>Menhir dit "Menhir du Gué"</h1>
            <figure>
                <img src="image/small/Menhir dit Menhir du Gue.jpg" />
                <figcaption><a href="#section25">Menhir dit "Menhir du Gué"</a>
                    <figcaption>
            </figure>
            <p> Petit menhir déplacé et christianisé (Croix gravée dans la partie supérieure).</p>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 37′ 30″ nord, 0° 17′ 39″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Germain-d'Arcé</li>
            </ul>
        </section>
        <section id="section27">
            <h1>Dolmen d'Amenon</h1>
            <figure>
                <img src="image/small/Dolmen d-Amenon.jpg" />
                <figcaption><a href="#section26">Dolmen d'Amenon</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 38′ 12″ N, 0° 15′ 12″ E</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Germain-d'Arcé<br>La Pièce de la Ronce</li>
            </ul>
        </section>
        <section id="section28">
            <h1>Menhirs de la Mère et de la Fille</h1>
            <figure>
                <img src="image/small/Menhirs de la Mere et de la Fille.jpg" />
                <figcaption><a href="#section27">Menhirs de la Mère et de la Fille</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 47′ 00″ nord, 0° 05′ 24″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Jean-de-la-Motte</li>
            </ul>
        </section>
        <section id="section29">
            <h1>Menhir</h1>
            <figure>
                <img src="image/small/Menhir.jpg" />
                <figcaption><a href="#section28">Menhir</a>
                    <figcaption>
            </figure>
            <p>Pierre levée à environ 50 mètres à l'ouest des menhirs de la Mère et de la Fille</p>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 47′ 00″ nord, 0° 05′ 21″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Jean-de-la-Motte</li>
            </ul>
        </section>
        <section id="section30">
            <h1>Palet de Gargantua</h1>
            <figure>
                <img src="image/small/Palet de Gargantua.jpg" />
                <figcaption><a href="#section29">Palet de Gargantua</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 44′ 50″ nord, 0° 03′ 42″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Jean-de-la-Motte</li>
            </ul>
        </section>
        <section id="section31">
            <h1>Pierre Potelée</h1>
            <figure>
                <img src="image/small/Pierre Potelee.jpg" />
                <figcaption><a href="#section30">Pierre Potelée</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 46′ 51″ nord, 0° 05′ 39″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Jean-de-la-Motte</li>
            </ul>
        </section>
        <section id="section32">
            <h1>Dolmen d'Hunault</h1>
            <figure>
                <img src="image/small/dolmen-dHunault.jpg" />
                <figcaption><a href="#section31">Dolmen d'Hunault</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 46′ 39″ nord, 0° 05′ 44″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Jean-de-la-Motte</li>
            </ul>
        </section>
        <section id="section33">
            <h1>Dolmen de Tresson</h1>
            <figure>
                <img src="image/small/dolmen-abstract.png" />
                <figcaption><a href="#section32">Dolmen de Tresson</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Mars-de-Locquenay</li>
            </ul>
        </section>
        <section id="section34">
            <h1>Menhir de Sourches</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section33">Menhir de Sourches</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Saint-Symphorien</li>
            </ul>
        </section>
        <section id="section35">
            <h1>Menhirs de Blandan</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section34">Menhirs de Blandan</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Savigné-l'Évêque</li>
            </ul>
        </section>
        <section id="section36">
            <h1>Menhir du Loup Pendu</h1>
            <figure>
                <img src="image/small/Menhir du Loup pendu.jpg" />
                <figcaption><a href="#section35">Menhir du Loup Pendu</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 32′ 10″ nord, 0° 06′ 50″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Savigné-sous-le-Lude</li>
            </ul>
        </section>
        <section id="section37">
            <h1>Dolmen de Sougé-le-Ganelon</h1>
            <figure>
                <img src="image/small/Dolmen de Souge-le-Ganelon.jpg" />
                <figcaption><a href="#section36">Dolmen de Sougé-le-Ganelon</a>
                    <figcaption>
            </figure>
            <p>En ruines, ne reste que deux pierres placées contre l'église.</p>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 19′ 05″ nord, 0° 01′ 47″ ouest</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Sougé-le-Ganelon</li>
            </ul>
        </section>
        <section id="section38">
            <h1>Dolmen de Torcé-en-Vallée</h1>
            <figure>
                <img src="image/small/Dolmen de Torce-en-Vallee.jpg" />
                <figcaption><a href="#section37">Dolmen de Torcé-en-Vallée</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 08′ 00″ nord, 0° 23′ 27″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Torcé-en-Vallée</li>
            </ul>
        </section>
        <section id="section39">
            <h1>Dolmen des Grandes Bruyères</h1>
            <figure>
                <img src="image/small/dolmen-abstract.png" />
                <figcaption><a href="#section38">Dolmen des Grandes Bruyères</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Tuffé</li>
            </ul>
        </section>
        <section id="section40">
            <h1>Dolmen de la Pierre couverte</h1>
            <figure>
                <img src="image/small/Dolmen de la Pierre couverte.jpg" />
                <figcaption><a href="#section39">Dolmen de la Pierre couverte</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 47° 41′ 46″ N, 0° 19′ 35″</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Vaas</li>
            </ul>
        </section>
        <section id="section41">
            <h1>Menhirs de Corbuon</h1>
            <figure>
                <img src="image/small/menhir-abstract.jpg" />
                <figcaption><a href="#section40">Menhirs de Corbuon</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: menhir</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten:</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Villaines-sous-Lucé</li>
            </ul>
        </section>
        <section id="section42">
            <h1>Dolmen des Roches</h1>
            <figure>
                <img src="image/small/Dolmen des Roches.jpg" />
                <figcaption><a href="#section41">Dolmen des Roches</a>
                    <figcaption>
            </figure>
            <ul>
                <li>Type: dolmen</li>
                <li>Periode: Neolithicum</li>
                <li>Coördinaten: 48° 05′ 24″ nord, 0° 33′ 18″ est</li>
                <li>Lengtegraad:</li>
                <li>Breedtegraad:</li>
                <li>Land: Frankrijk</li>
                <li>Regio: Pays de la Loire</li>
                <li>Departement: Sarthe</li>
                <li>Stad: Vouvray-sur-Huisne</li>
            </ul>
        </section>
        <footer>
            <address>
                Samengesteld door Jef Inghelbrecht
            </address>
        </footer>
    </article>
    <footer>
        &copy; Moe maar tevreden 2019
    </footer>
</body>
</html>
  2. CSS 
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

body > header {
    margin: 0 0 1em 5%; /* stenonotatie */
    /* margin-left: 5%;  uitegebreide notatie */
    padding: 0 1em 0 1em;
    width: 90%;
    height: 8%;
    background-color:#e24510;
    /* border: black solid 0.5em; stenonotatie */
    border-style: dotted;
    border-color: black;
    border-width: 0.1em;
}

body > header > h1 {
    float: right;
    color: #faebd7;
}

body > header > nav > a {
    /* text-decoration: none;  remove underscore from link */
    color: #faebd7;
     padding: 0 1em 0 1em;
}
body > header > nav > a {
    border-right: solid black 0.2em;
}
body > header > nav > a:first-child {
    border-left: solid black 0.2em;
}
article {
    width: 90%;
    margin: 0 0 0 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
 }

section h1, section ul, section p {
    display: none;
}

section figure img {
    width: 10em;
}

section {
    border: dotted 1px black;
    padding: 1em;
    width: 16em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section figure figcaption {
    text-align: center;
}

section:target + section {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

section:target + section h1,
section:target + section ul,
section:target + section p {
    display: block;
}

#section0 {
    display: none;
}

h1, h2, h3, h4, h5, h6, figcaption {
    font-family: Garamond, Georgia, serif;
}

p {
   font-family:  Palatino, Times New Roman, Serif;
}

footer {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

JI
2019-04-29 20:38:47